<script setup>
import {FwbInput , FwbModal} from "flowbite-vue";
import {ref,reactive,watch} from "vue";
import $bus from '@/bus/index.js';
const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
}
const showModal = () => {
  isShowModal.value = true
}
defineExpose({
  showModal,
})
const checked = ref(false)
const textShow = ref(false) // No more licenses available 文字显示
// watch(checked, newVal => {
//   if(newVal){
//     textShow.value = true
//   }else{
//     textShow.value = false
//   }
// })
const AssignOk = () => {
  $bus.emit('assign',{msg:"确认分配"});
  closeModal()
}
</script>

<template>
  <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
    <template #header>
      <div class="text-lg flex flex-col text-sm text-[#9CA3AF] font-[500] font-Medium" >
        <div class="">
          <p class="text-md">Assign License to Cameras</p>
        </div>
        <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[111px] left-0 hidden s4k:block s4k:top-[79px]"></div>
      </div>
    </template>

    <template #body>
      <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[50px] left-0 s4k:hidden s2k:top-[60px]"></div>
      <div class="w-full h-[45px] border-b border-solid border-[var(--grid)] flex flex-row items-center">
        <span v-if="!checked" class="ml-[16px] text-md text-[var(--theme-font-desc-color)]">Select up to 1 more cameras</span>
        <span v-else class="ml-[16px] text-md text-[var(--theme-font-desc-color)]">No more licenses available</span>
      </div>
      <div class="w-full h-[74px] border-b border-solid border-[var(--grid)] flex flex-row items-center relative">
        <svg-icon name="search" width="16px" height="16px" class="svgClass s2ksvg s4ksvg absolute left-[30px]"></svg-icon>
        <input type="text" id="input" class="ml-[16px]">
        <div class="w-[71px] h-[42px] bg-[var(--theme-button-bg)] rounded-[0_8px_8px_0] flex cursor-pointer">
          <span class="text-md text-white m-auto">Search</span>
        </div>
      </div>
      <div class="w-full h-[400px] list">
        <div class="w-full h-[10px]"></div>
        <div class="w-full h-[64px] flex flex-row justify-between items-center" v-for="i in 10" :key="i">
          <div class="flex flex-row justify-start items-center">
            <input type="checkbox" class="text-[16px] w-[16px] h-[16px] rounded bg-[var(--grid)] s4k:rounded-[4px] ml-[24px] cursor-pointer" v-model="checked"/>
            <div class="flex flex-col ml-[16px]">
              <div class="text-[16px] text-[var(--theme-font-color)]">Camera ID</div>
              <div class="text-md text-[var(--theme-font-desc-color)] mt-[3px]">Location{{i}}</div>
            </div>
          </div>
          <img src="@/assets/image/base.png" alt="" class="w-[80px] h-[40px] mr-[16px]">
        </div>
        <div class="w-full h-[10px]"></div>
      </div>
      <div class="mb-[81px]"></div>
    </template>
    <template #footer>
      <div class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row justify-start items-center">
        <div class="w-[455px] h-[41px] font-[500] text-white font-Medium text-md bg-[#1C64F2] rounded-lg s2k:w-[445px] s4k:w-[440px] s4k:rounded-[8px] flex ml-[1rem] cursor-pointer" @click="AssignOk">
          <span class="m-auto">Assign License to Selected Cameras</span>
        </div>
      </div>
    </template>
  </fwb-modal>
</template>

<style scoped lang="scss">
#CreateModal {
  :deep(.max-w-md) {
    z-index: 999 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 480px !important;
    height: auto;
    overflow-y: hidden;
    button {
      cursor: pointer;

      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 99.5%;
      height: auto !important;
      background-color: var(--theme);
      border: solid 1px var(--grid);
      overflow-x: hidden !important;
    }
    .p-4 {
      padding-right: 8px !important;
      padding-left: 16px;
    }
    .p-6 {
      padding: 0 !important;
      height: auto !important;
    }
  }
}

#input {
  width: 335px;
  height: 40px;
  padding: 0;
  padding-left: 40px;
  font-size: 14px;
  color: #9CA3AF;
  background: var(--theme);
  border: solid 1px var(--grid);
  border-radius: 8px 0 0 8px;
  &:focus {
    outline: none;
    box-shadow: inset 0 0;
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.5);
      .p-4{
        padding-right: 4px !important;
      }
      //.p-6 {
      //  padding:  0.8rem;
      //  padding-right: 1.6rem;
      //  margin-top: -20px;
      //  margin-bottom: 20px;
      //}
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(2);
      .p-4{
        padding-right: 4px !important;
        padding-left: 16px;
      }
      //.p-6 {
      //  padding:  0.6rem;
      //  padding-right: 1rem;
      //}
    }
  }
}
</style>
